import React from 'react';
import { Menu, MenuProps, Avatar, Popconfirm, Button, message } from 'antd';
import { clearItems, getUserName} from '../utils/auth';
import {
  UserOutlined,
  SettingOutlined,
  BookOutlined,
  DashboardTwoTone,
  PoweroffOutlined
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return { key, icon, children, label } as MenuItem;
}

const menuItems: MenuItem[] = [
  getItem('控制台', '/', <DashboardTwoTone />),
  getItem('用户管理', '/user', <UserOutlined />, [
    getItem('用户列表', '/user/list'),
  ]),
  getItem('课程管理', '/course', <BookOutlined />, [
    getItem('课程列表', '/course/list'),
  ]),
  getItem('模型管理', '/model', <SettingOutlined />, [
    getItem('模型数据管理', '/model/list'),
    getItem('语料管理', '/model/corpus'),
  ]),
];

const SideMenu: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  // 从当前路径推导选中状态
  const [selectedKeys] = React.useState([location.pathname]);

  // 默认展开所有父级菜单
  const rootSubmenuKeys = menuItems.map(item => item!.key as string);
  const [openKeys, setOpenKeys] = React.useState(rootSubmenuKeys);

  // 菜单点击事件
  const onMenuClick: MenuProps['onClick'] = ({ key }) => {
    navigate(key);
  };

  // 控制菜单展开/折叠
  const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
    setOpenKeys(keys as string[]);
  };

  const [messageApi, contextHolder] = message.useMessage();
  const loginOut = () => {
    clearItems();
    messageApi.success('登出成功');
    setTimeout(()=> {
      window.location.href = "/login"
    }, 300)
    
  };


  return (
    <div className="flex flex-col justify-between min-h-full top-0 left-0 w-50 bg-white shadow-lg flex-1 fixed z-10">
      <div>
        {contextHolder}
        <div className="relative h-20 flex items-center pl-4 pr-3" onClick={() => navigate('/user')}>
        {/* 头像容器 */}
        <div className="flex-shrink-0 relative">
          <Avatar
            size={40}
            icon={<UserOutlined />}
            style={{ backgroundColor: '#1890ff' }}
          />
        
          <div className="absolute -right-1 -top-1 w-3 h-3 rounded-full border-2 border-white bg-green-500" />
        </div>

        {/* 用户名显示 */}
        <div className="ml-4 space-y-1">
          <div className="text-sm font-medium text-gray-900 truncate">
            { getUserName() || "游客状态"}
          </div>
        </div>

        <Popconfirm
          title="确定要退出登录吗？"
          onConfirm={loginOut}
          okText="确认"
          cancelText="取消"
        >
          <Button
            type="text"
            shape="circle"
            icon={<PoweroffOutlined className="text-gray-600 hover:text-red-500 transition-colors" />}
            className="hover:!bg-gray-100 ml-3"
          />
        </Popconfirm>
      </div>
        <Menu
          mode="inline"
          items={menuItems}
          selectedKeys={selectedKeys}
          openKeys={openKeys}
          onOpenChange={onOpenChange}
          onClick={onMenuClick}
          className="h-[calc(100%-64px)]"
        />
      </div>

    </div>
  );
};

export default SideMenu;